{% extends 'base.html' %}
{% block title %}
    分析结果
{% endblock %}
{% block link %}
    <link rel="icon" href="{{ url_for('static', filename='images/icon.png') }}">
    <script src="{{ url_for('static', filename='js/echarts.js') }}"></script>
    <script src="{{ url_for('static', filename='js/charts_gen.js') }}"></script>
    <script src="{{ url_for('static', filename='js/jquery-3.6.0.js') }}"></script>
{% endblock %}

{% block style %}
    <style>
        .chart_1 {
            display: inline-block;
            width: 600px;
            height: 440px;
            margin: 0 40px 0;
            padding: 10px 0 0;
        }

        .chart {
            display: inline-block;
            width: 530px;
            height: 380px;
            margin: 0 40px 0;
            padding: 10px 0 0;
            overflow: hidden;
        }
    </style>
{% endblock %}


{% block body %}
    <body class="main layui-bg-gray">
    <div>
        <div class="" style="padding: 30px 0 0; text-align: center">
            <div style="font-size: 28px; font-weight: bold;margin-bottom: 30px">{{ text_title }}</div>
            <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
            <div id="rating" class="chart"></div>
            <div id="price_range" class="chart"></div>
            <div id="add_time" class="chart"></div>
            <div id="score" class="chart"></div>
            <div id="rating_stars" class="chart"></div>
            <div id="top5" class="chart"></div>
        </div>
    </div>

    <script type="text/javascript">
        $(function () {
            let ids = ['rating', 'price_range', 'add_time', 'score', 'rating_stars', 'top5']
            let titles = ['Rating区间销量占比', '价格区间销量占比', '上架时间销量占比', '评分区间销量占比', '评分星级个数占比', 'Top5品牌销量占比']
            let datas = {{ data|tojson }};
            for (let i = 0; i < ids.length; i++) {
                let chartDom = document.getElementById(ids[i]);
                let chartInit = echarts.init(chartDom);
                let chart = charts_t(title = titles[i], data = datas[i]);
                chartInit.setOption(chart);
            }
        });
    </script>
    </body>
{% endblock %}
